<template>
  <div>
    <el-container>
      <el-header style="background-color: white; width: 100%;position: fixed;z-index: 99 ;border-bottom: rgba(99,99,99,0.2) 1px solid">
      <div style="margin: 0 auto;width: 1200px;background-color: white;height: 59px;border-bottom: rgba(99,99,99,0.2) 1px solid">
        <!--            头部的部分-->

        <div style="float: left;display: inline-block">
          <a  href="/index">
            <img  style="height: 30px;margin-top: 13px;" src="http://www.autotianjin.com.cn/i/web/images/logo.png">
          </a>
        </div>
        <div style="margin: 0 auto;display: inline-block;">
          <el-menu
              router
              :default-active="activeIndex"
                   class="el-menu-demo"
                   mode="horizontal">
            <el-menu-item index="/index">首页</el-menu-item>

            <el-menu-item index="/showList">车展购票</el-menu-item>

            <!--submenu子菜单-->
            <!--
                          <el-menu-item index="2"><a  @click="$router.push('/index')" style="margin: 0 20px">2好</a></el-menu-item>

                          &lt;!&ndash; todo 跳转到笔记&ndash;&gt;
                          <el-menu-item index="3" style="margin: 0 20px"><a @click="$router.push('/homepage')" style="text-decoration: none">笔记</a></el-menu-item>
            -->

            <div style="float: right;position: relative;top: 10px;left: 450px">
              <el-input type="text" placeholder="搜索关键字" v-model="search">
                <!--                  todo 搜索后  根据关键词展示稿件  -->
                <el-button slot="append" icon="el-icon-search" @click="searchRecipe()"></el-button>
                <span><a href="javascript:void(0);"></a></span>
              </el-input>
            </div>
          </el-menu>
        </div>

        <!-- 显示当前登录的用户信息 -->
        <div class="login-user" style="float: right;display: inline-block;margin-top:10px;margin-right: 135px">
          <el-dropdown>
            <el-avatar size="medium" :src="admin.avatar"></el-avatar>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-s-custom" @click.native="openManagement()">用户中心</el-dropdown-item>
              <el-dropdown-item icon="el-icon-remove" divided @click.native="logout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <!--          <div style="float: right;display: inline-block;padding-top:20px;padding-right:5px;margin-left: 0px;"><a href="" style="display: inline-block;
              width: 60px;
              height: 25px;
              text-align: center;
              line-height: 23px;
              background: #FFB31A;
              color: #fff;
              font-size: 14px;
              border-radius: 4px;
              text-decoration: none;">发布</a></div>-->


      </div>
    </el-header>

      <el-main>
        <div style="width: 1200px;margin: 0 auto">

        <!--    车展票的详情页面-->
          <div style="border: #ccc 1px solid;width: 1000px;height:1100px;position: relative;overflow-y: hidden">
            <!--      车展购票表单-->
            <el-header>
              <div style="margin-top: 50px">
                <el-container v-for="show in tableData" :key="show.id" style="margin-top: 20px">
                  <!--        车票图片-->
                  <el-aside width="200px">
                    <el-link :href="'/show?showId='+show.id" :underline="false">
                      <img src="https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01ECHZCn2GdSUexvB1d_!!0-item_pic.jpg_q60.jpg_.webp"
                        alt="" style="margin: 0" width="170px">
                    </el-link>
                  </el-aside>
                  <!--       购票表单-->
                  <el-main width="500px" style="margin-top: 0px !important;margin-left: -20px !important;">
                    <div class="buyForm">
                      <div style="margin: 10px 0">
                        <span style="font-size: 22px;margin-bottom: 15px;display: inline-block ">
                          <el-link :href="'/show?showId='+show.id" :underline="false" style="font-size: 22px">
                            {{show.title}}
                          </el-link>
                        </span><br>
                        <p style="font-size: 14px;margin-bottom: 10px">场馆：天津市22222 | 梅江会展中心二期 </p>
                        <p style="font-size: 14px">时间：{{show.startTime}}——{{show.endTime}}</p>
                      </div>
                      <!--开始选择-->
                      <div>
                        <div class="sele">
                          <div style="margin-top: 70px">
                            <el-radio v-model="radio2" label="5.9" border @change="count" style="margin-left:10px">
                              单人票{{show.price}}元
                            </el-radio>
                            <span style="font-size: 12px">售票中</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-main>
                </el-container>
              </div>
            </el-header>
          </div>
      </div>
      </el-main>
      <el-footer height="200px">
        <el-row style="width: 1200px !important;margin: 0px auto;color:#fff;">
          <el-col :span="13" style="margin-top: 20px">
            <el-row>
              <el-col :span="10">
                <p class="title">主办单位
                  <el-divider></el-divider>
                </p>
                <p>中国汽车流通协会</p>
                <p>百瑞国际会展集团有限公司</p>
                <p>中国国际贸易促进委员会天津市分会</p>
              </el-col>
              <el-col :span="7">
                <p class="title">承办单位<el-divider></el-divider></p>
                <p>天津国际展览有限公司</p>
                <p>北京杜米文化传播有限公司</p>
              </el-col>
              <el-col :span="7">
                <p class="title" style="width: 100px">特别支持单位<el-divider></el-divider></p>
                <p>天津汽车流通协会</p>
              </el-col>
            </el-row>
            <el-row style="font-size: 14px;margin-top: 6px">
              Copyright © 2023 天津浩特瑞展览有限公司津ICP备16007344号-2技术支持：沣泽霖（北京）信息科技有限公司
            </el-row>
          </el-col>
          <el-col :span="4" style="text-align: center;margin-top: 20px">
            <img width="90" src="http://www.autotianjin.com.cn/i/web/images/images_tianjin_20230428/code_weixin.jpg" alt="">
            <p>扫一扫关注公众号</p>
          </el-col>
          <el-col :span="5" style="text-align: center;margin-top: 20px">
            <img src="http://www.autotianjin.com.cn/i/web/images/footer_logo.png" width="100%" alt="">
            <p style="font-size: 16px;margin-top: 10px">服务热线</p>
            <p style="font-size: 22px;margin-top: 15px">400-8099-016</p>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import global from '../../Global'
let preAdminUrl = global.preAdmins;
let preShowUrl = global.preShows ;

export default {
  data() {
    return {
      search:"",
      tableData: [],
      activeIndex: '/showList',
      admin:{},
      // price: 1,
      num:  1,
      radio1: '1',
      radio2: "5.9",
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
    }
  },
  methods: {
    searchRecipe(){
    },
    onSubmit() {
      console.log('submit!');
    },
    count(){
      this.price=(this.num*this.radio2).toFixed(2);
    },
    //加载车展列表
    loadShowList(){
      let page = this.$router.currentRoute.query.page;
      if(!page){
        page = 1;
      }
      let url = preShowUrl+"?queryType=all";

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.tableData = jsonResult.data.list;
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    //登出
    logout(){
      let url = preAdminUrl + "/logout";
      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .post(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.$alert("退出成功", '成功', {
            confirmButtonText: '确定',
            callback: action => {
              localStorage.removeItem("localJwt");
              this.$router.push("/webLogin");
            }
          });
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    openManagement(){
      this.$router.push("/userManagement");
    },
    //获取当事人信息
    loadLoginPrincipal(){
      let url = preAdminUrl + "/index";

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.admin = jsonResult.data;
          console.log(this.admin.avatar)
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  computed: {
    price() {
      return this.num * this.radio2;
    }
  },
  mounted() {
    this.loadLoginPrincipal();
    this.loadShowList();
  }
}

</script>

<style>

body {
  background: #fff;
  font: 12px Noto Sans,"思源黑体";
  /*padding-top: 60px;*/
}


.buyForm p,span{
  color: #4a4a4a;
}
.sele{
  font-size: 16px;
}

.el-footer{
  margin: 0;
  padding: 0;
  background-color: #242424;
  overflow: hidden;
  text-align: left;
  position: relative;
  bottom: -55px;
}
.el-footer .title{
  width: 80px;
}
.el-footer .title .el-divider{
  background-color: #ffd04b;
  height: 2px;
  margin: 8px 0;
}
.el-footer p{
  margin-top: 6px;
}
</style>


